<template>
    <section class="fr-wrap">
        <h2 class="title">个人中心</h2>
        <div class="underline"></div>

        <div class="pc-layout">
            <PersonalSidebar />
            <el-card class="fr-card">
                <div class="fr-head">
                    <h3>家属关系</h3>
                    <div class="actions">
                        <el-button type="success" plain @click="openAdd">
                            <el-icon><Plus /></el-icon>
                            添加家属
                        </el-button>
                    </div>
                </div>

                <div class="families-list">
                    <el-card
                        v-for="(f, idx) in families"
                        :key="idx"
                        shadow="never"
                        class="fam-item">
                        <div class="fam-main">
                            <div class="fam-left">
                                <el-avatar :size="42" src="/src/assets/images/avatar1.png" />
                            </div>
                            <div class="fam-info">
                                <div class="fam-name">
                                    {{ f.name }}
                                    <span class="fam-relation">{{ f.relation }}</span>
                                </div>
                                <div class="fam-line">
                                    <el-icon><Phone /></el-icon>
                                    <span>{{ maskPhone(f.phone) }}</span>
                                </div>
                                <div class="fam-line">
                                    <el-icon><Message /></el-icon>
                                    <span>{{ f.email }}</span>
                                </div>
                                <div class="fam-line">
                                    <el-icon><Location /></el-icon>
                                    <span>{{ f.address }}</span>
                                </div>
                                <div class="fam-tags">
                                    <el-tag v-if="f.permissions.visit" size="small" type="success">
                                        可探视
                                    </el-tag>
                                    <el-tag
                                        v-if="f.permissions.accompany"
                                        size="small"
                                        type="success">
                                        可陪同外出
                                    </el-tag>
                                    <el-tag
                                        v-if="f.permissions.medical"
                                        size="small"
                                        type="primary">
                                        可接收医疗通知
                                    </el-tag>
                                    <el-tag
                                        v-if="f.permissions.finance"
                                        size="small"
                                        type="warning">
                                        可管理财务
                                    </el-tag>
                                </div>
                            </div>
                            <div class="fam-actions">
                                <el-button circle plain size="small" @click="edit(f, idx)">
                                    <el-icon><Edit /></el-icon>
                                </el-button>
                                <el-button
                                    circle
                                    plain
                                    size="small"
                                    type="danger"
                                    @click="remove(idx)">
                                    <el-icon><Delete /></el-icon>
                                </el-button>
                            </div>
                        </div>
                    </el-card>
                </div>
            </el-card>
        </div>

        <el-dialog v-model="addVisible" title="添加家属" width="560px">
            <el-form :model="form" label-width="110px">
                <el-form-item label="姓名">
                    <el-input v-model="form.name" placeholder="请输入家属姓名" />
                </el-form-item>
                <el-form-item label="与老人关系">
                    <el-select v-model="form.relation" placeholder="请选择">
                        <el-option v-for="opt in relations" :key="opt" :label="opt" :value="opt" />
                    </el-select>
                </el-form-item>
                <el-form-item label="手机号码">
                    <el-input v-model="form.phone" placeholder="请输入手机号" />
                </el-form-item>
                <el-form-item label="电子邮箱">
                    <el-input v-model="form.email" placeholder="请输入电子邮箱" />
                </el-form-item>
                <el-form-item label="家庭住址">
                    <el-input type="textarea" v-model="form.address" placeholder="请输入家庭住址" />
                </el-form-item>
                <el-form-item label="权限设置">
                    <div class="perm-group">
                        <el-checkbox v-model="form.permissions.visit">允许探视</el-checkbox>
                        <el-checkbox v-model="form.permissions.accompany">允许陪同外出</el-checkbox>
                        <el-checkbox v-model="form.permissions.medical">
                            允许接收医疗通知
                        </el-checkbox>
                        <el-checkbox v-model="form.permissions.finance">允许管理财务</el-checkbox>
                    </div>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="btns">
                    <el-button @click="cancelAdd">取消</el-button>
                    <el-button type="success" @click="submitAdd">确认</el-button>
                </div>
            </template>
        </el-dialog>
    </section>
</template>

<script setup>
    import { ref, reactive } from "vue";
    import PersonalSidebar from "@/components/PersonalSidebar.vue";
    import { Plus, Edit, Delete, Location, Message, Phone } from "@element-plus/icons-vue";

    const families = ref([
        {
            name: "张明",
            relation: "儿子",
            phone: "13800001111",
            email: "zhang@example.com",
            address: "北京市海淀区中关村大街5号",
            permissions: { visit: true, accompany: true, medical: true, finance: false },
        },
        {
            name: "李华",
            relation: "女儿",
            phone: "13900002222",
            email: "li@example.com",
            address: "北京市朝阳区望京路88号",
            permissions: { visit: true, accompany: true, medical: false, finance: false },
        },
    ]);

    const addVisible = ref(false);
    const editingIndex = ref(null);
    const relations = ["儿子", "女儿", "侄子", "侄女", "女婿", "儿媳", "其他"];

    const form = reactive({
        name: "",
        relation: relations[0],
        phone: "",
        email: "",
        address: "",
        permissions: { visit: true, accompany: true, medical: false, finance: false },
    });

    const openAdd = () => {
        resetForm();
        editingIndex.value = null;
        addVisible.value = true;
    };
    const cancelAdd = () => {
        addVisible.value = false;
    };
    const resetForm = () => {
        form.name = "";
        form.relation = relations[0];
        form.phone = "";
        form.email = "";
        form.address = "";
        form.permissions.visit = true;
        form.permissions.accompany = true;
        form.permissions.medical = false;
        form.permissions.finance = false;
    };

    const submitAdd = () => {
        const payload = {
            name: form.name.trim(),
            relation: form.relation,
            phone: form.phone.trim(),
            email: form.email.trim(),
            address: form.address.trim(),
            permissions: { ...form.permissions },
        };
        if (!payload.name || !payload.relation || !payload.phone) {
            // 简单必填校验
            return;
        }
        if (editingIndex.value !== null) {
            families.value.splice(editingIndex.value, 1, payload);
        } else {
            families.value.push(payload);
        }
        addVisible.value = false;
    };

    const edit = (item, idx) => {
        form.name = item.name;
        form.relation = item.relation;
        form.phone = item.phone;
        form.email = item.email;
        form.address = item.address;
        form.permissions.visit = !!item.permissions.visit;
        form.permissions.accompany = !!item.permissions.accompany;
        form.permissions.medical = !!item.permissions.medical;
        form.permissions.finance = !!item.permissions.finance;
        editingIndex.value = idx;
        addVisible.value = true;
    };

    const remove = (idx) => {
        families.value.splice(idx, 1);
    };

    const maskPhone = (val) => {
        if (!val || val.length < 7) return val;
        return `${val.slice(0, 3)}****${val.slice(-4)}`;
    };
</script>

<style scoped>
    .fr-wrap {
        padding: 32px 20px;
    }
    .title {
        text-align: center;
        font-weight: 800;
        font-size: 24px;
        color: #222;
    }
    .underline {
        width: 80px;
        height: 4px;
        background: #4a7b26;
        border-radius: 2px;
        margin: 10px auto 24px;
    }
    .pc-layout {
        max-width: 1200px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 280px 1fr;
        gap: 20px;
    }
    .fr-card {
    }
    .fr-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
    }
    .actions {
        display: flex;
        gap: 8px;
    }
    .families-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .fam-item {
    }
    .fam-main {
        display: grid;
        grid-template-columns: 42px 1fr auto;
        align-items: center;
        gap: 12px;
    }
    .fam-name {
        font-weight: 700;
    }
    .fam-relation {
        margin-left: 8px;
        color: #666;
        font-size: 13px;
    }
    .fam-line {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: #555;
        margin-top: 2px;
    }
    .fam-tags {
        display: flex;
        gap: 6px;
        margin-top: 6px;
    }
    .fam-actions {
        display: flex;
        gap: 6px;
    }
    .perm-group {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .btns {
        display: flex;
        gap: 12px;
        justify-content: flex-end;
    }
    @media (max-width: 900px) {
        .pc-layout {
            grid-template-columns: 1fr;
        }
    }
</style>
